<template>
  <div class="phone-forget">
    <div class="phone-forget-wrapper">
      <div class="phone-forget-box">
        <div class="close-wrapper">
          <span class="close" @click="closePhoneBox">
          <img width="100%" height="100%" src="../../assets/img/close@3x.png"/>
        </span>
        </div>
        <div class="phone-forget-content">
          <div v-if="resetOne">
            <div class="input-wrapper">
              <mt-field :state="state.phone" placeholder="请输入您的手机号" type="phone" v-model="phoneNumber"></mt-field>
              <p class="tips" v-show="state.phone === 'error'">请确认您的手机号码格式</p>
            </div>
            <div class="captcha-wrapper">
              <mt-field placeholder="请输入验证码" v-model="captcha"></mt-field>
              <span class="captcha-btn" @click="countDown"
                    :class="{'captcha-active':start || !phoneNumber || state.phone !== 'success'}">
              <count-down :start=start></count-down>
            </span>
            </div>
            <div class="bottom-big-btn">
              <a href="javascript:;" class="submit" @click="resetNext" :class="{'btn-readonly': state.phone !== 'success'
            || !captcha || !phoneNumber}">下一步</a>
            </div>
          </div>
          <div v-else>
            <form>
              <div class="input-wrapper">
                <mt-field :state="state.password" placeholder="请输入新密码" type="password" v-model="password"></mt-field>
                <p class="tips" v-show="state.password === 'error'">请输入长度为6-20位数的密码</p>
              </div>
              <mt-field placeholder="确认密码" type="password" v-model="confirmPassword"></mt-field>
            </form>
            <div class="bottom-big-btn">
              <button class="submit" @click="resetOk">完成</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import countDown from '../../components/common/countDown/countDown'
  import {closePhoneBox} from '../../assets/js/common'

  export default {
    data() {
      return {
        find: true,
        reset: true,
        resetOne: true,
        start: false,
        password: '',
        captcha: '',
        confirmPassword: '',
        phoneNumber: '',
        state: {phone: '', password: '', appeal: '', time: ''}
      }
    },
    methods: {
      closePhoneBox,
      resetNext() {
        if (this.state.phone === 'success' && this.captcha && this.phoneNumber) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=backPassword', {
            params: {
              phone: this.phoneNumber,
              code: this.captcha
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.resetOne = false
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000,
                position: 'bottom'
              })
            }
          })
        }
      },
      countDown() {
        if (this.state.phone === 'success' && this.phoneNumber) {
          this.start = true
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=sendSms', {
            params: {
              phone: this.phoneNumber,
              type: 1
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '发送成功',
                duration: 1000,
                position: 'bottom'
              })
            } else {
              this.Toast({
                message: response.data.info,
                duration: 2000,
                position: 'bottom'
              })
            }
          })
        }
      },
      resetOk() {
        if (this.state.password === 'success' && this.password && this.confirmPassword) {
          this.$http.post('/game/index.php?m=Home&c=PcApi&a=modifyPassword', {
            params: {
              phone: this.phoneNumber,
              password: this.password,
              re_password: this.confirmPassword
            }
          }).then((response) => {
            if (response.data.code === this.ERROR_OK) {
              this.Toast({
                message: '密码修改成功',
                duration: 2000,
                position: 'bottom'
              })
              setTimeout(() => {
                this.$router.push({path: '/phoneLogin'})
              }, 2000)
            }
          })
        }
      }
    },
    watch: {
      phoneNumber(value) {
        if (value.length > 11 || value.indexOf('1') !== 0) {
          this.state.phone = 'error'
        } else {
          this.state.phone = 'success'
        }
      },
      password(value) {
        if (value.length < 6 || value.length > 20) {
          this.state.password = 'error'
        } else {
          this.state.password = 'success'
        }
      }
    },
    components: {
      countDown
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .phone-forget
    position absolute
    width 100%
    height 100%
    background #fff
    z-index 10
    .phone-forget-wrapper
      display flex
      justify-content center
      align-items center
      width 100%
      height 100%
      background rgba(0, 0, 0, .2)
      .phone-forget-box
        width 620px
        min-height 515px
        border-radius 10px
        background #fff
        .close-wrapper
          position relative
          .close
            position absolute
            display block
            top 19px
            right 12px
            width 36px
            height 35px
        .phone-forget-content
          margin-top 122px
          padding 0 82px
          .captcha-wrapper, .input-wrapper
            position relative
            .captcha-btn
              position absolute
              display block
              width 179px
              height 59px
              top 6px
              right 5px
              text-align center
              font-size 28px
              line-height 59px
              color #fff
              background #2ECC40
              z-index 99
              border-radius 5px
              &.captcha-active
                background #ccc
</style>
